<h3>A Word of Warning</h3>

<p>Since the feature set is growing rather rapidly I will probably be rethinking a lot of the code structure, naming, and syntax. Please keep this in mind if you are trying to upgrade from a previous release of Mocha UI.

<p>I would like to develop a core that is modular, light, robust, and easy to modify and extend. At these early stages I encourage early adopters to voice their thoughts on code structure, naming and syntax. What functionality would you like to see in it's own class or implemented as a plugin or module? Do you see something in the code that can be optimized? Do you have ideas on implementing plugins or modules? Let me know.</p>

<p>As the code and feature set becomes more crystallized the documentation will be further developed.</p>

<h3>Aspects of Mocha UI (Subject to Change)</h3>
<ul>
	<li>Desktop. The Desktop is the Mocha UI container.</li>
	<li>Toolbars - Requires the Desktop</li>
	<li>Workspaces - Requires the Desktop and Toolbars; not yet implemented</li>
	<li>Windows - Requires the Desktop, though considering making it possible to break this dependency</li>
</ul>

<h3>Methods</h3>
<p>
newWindow() - Create a new window<br />
newWindowsFromJSON() - Create one or more new windows from Json data. Uses newWindow()
focusWindow() - Focus a window<br />
maximizeWindow() - Maximize a window<br />
minimizeWindow() - Minimize a window<br />
restoreMinimized() - Restore a minimized window<br />
closeWindow() - Close a window<br />
closeAll() - Close all the windows<br />
</p>

<h3>Creating a New Window</h3>

<p><strong>Syntax:</strong></p>
<pre>
document.mochaUI.newWindow();
</pre>

<p><strong>Arguments: </strong>Options</p>

<p><strong>Options:</strong></p>
<ul>
	<li>id: (string)</li>
	<li>title: (string)</li>
	<li>loadMethod: (string: 'html', 'xhr', or 'iframe')</li>
	<li>content: (string) used if contentType is set to 'html'</li>
	<li>contentURL: (string) used if contentType is set to 'xhr' or 'iframe'</li>
	<li>modal: (boolean)</li>
	<li>draggable: (boolean)</li>
	<li>resizable: (boolean)</li>
	<li>minimizable: (boolean)</li>
	<li>maximizable: (boolean)</li>
	<li>closable: (boolean)</li>	
	<li>width: (number)</li>
	<li>height: (number)</li>
	<li>scrollbars: (boolean)</li>
	<li>x: (number) If x or y are not set the new window is centered in the browser window.</li>
	<li>y: (number)</li>
	<li>paddingVertical: (number)</li>
	<li>paddingHorizontal: (number)</li>
	<li>bgColor: (string, defaults to '#fff')</li>
</ul>

<p><strong>Events:</strong></p>
<ul>
	<li>onContentLoaded: (function)	Event, fired when content is successfully loaded via xhr</li>
	<li>onFocus: (function) Event, fired when window is focused</li>
	<li>onResize: (function) Event, fired when window is resized</li>	
	<li>onMinimize: (function) Event, fired when window is minimized</li>
	<li>onMaximize: (function) Event, fired when window is maximized</li>
	<li>onClose: (function)	Event, fired just before window is closed</li>
	<li>onCloseComplete: (function)	Event, fired after window is disposed</li>		
</ul>	

<h3>Loading Content with an XMLHttpRequest(XHR)</h3>
<p>For content to load via xhr all the files must be online and in the same domain. If you need to load content from another domain or wish to have it work offline, load the content in a iframe instead of using the xhr option.</p>

<h3>Iframes</h3>
<p>There are at least three ways you can put Iframes in your windows. You can place an iframe in one of your mocha divs in the original index.html. You can use the iframe contentType option, which will place your content in an iframe for you though this gives you the least amount of control over the iframe's properties. You can load a page with an iframe in it into a window using xhr. The later option gives you the most control.</p>

<p>If you use the iframe contentType your iframe will automatically be resized when the window it is in is resized. If you want this same functionality when using one of the other load options simply add class="mochaIframe" to those iframes and they will be resized for you as well.</p>

<h3>Creating a Window Link</h3>

Example HTML:
<pre>
&lt;a id="docsLink" href="pages/docs.html"&gt;Documentation&lt;/a&gt;
</pre>

Example Javascript:
<pre>
	if ($('docsLink')){
		$('docsLink').addEvent('click', function(e){	
			new Event(e).stop();
			document.mochaUI.newWindow({
				id: 'docs',
				title: 'Documentation',
				loadMethod: 'xhr',
				contentURL: 'pages/docs.html',
				width: 320,
				height: 320,
				x: 20,
				y: 60
			});
		});
	}
</pre>

<p><strong>Notes:</strong></p>
<p>If you wish to add links in windows that open other windows remember to add events to those links when the windows are created.</p>

<h3>Updating the Content of a Window</h3>
<p>Updating the content of a window requires that you know the ID property of the window. Setting the ID is an option when creating a window.</p>

You can change the content of a window by referring to:
<pre>
this.getSubElement($('windowID'), 'content');
</pre>

If you used the iframe load method, you can change the src of that window's iframe as follows:
<pre>
this.getSubElement($('windowID'), 'iframe').src = 'http://www.mydomain.com/';
</pre>

<h3>Closing a Window</h3>
<p>Closing a window requires that you know the ID property of the window. Setting the ID is an option when creating a window.</p>

Example Javascript:
<pre>
document.mochaUI.closeWindow($('windowID'));
</pre>

<h3>Swiff and SWFobject</h3>
<p>I am using Swiff to load the example YouTube Flash now since Swiff is built into Mootools, but it has some performance issues when resizing, maximizing, and minimizing windows with Flash in them in Opera that SWFobject did not.</p>

<h3>General Issues</h3>
<p>If you have a solution for any of these please let me know.</p>
<ul>
	<li>In IE7, the wrong cursor, an I-bar, is displayed when the cursor is over #mochaPage, the main content area of the web page.</li>
	<li>In the YouTube example, if the window is maximized and the video is playing, when the browser window is resized, the iframe the flash is in does not resize. This works fine however if the video is paused.</li>	
</ul>

<h3>Browser Performance Issues</h3>

<p>Opera 9</p>
<ul>
	<li>Though they don't bleed threw thankfully, you can move the scrollbars on windows that are behind other windows.</li>
	<li>Seems to have issues with Swiff, though you could use SWFobject instead.</li>
</ul>

<p>Mac Firefox 2  - Not fully supported</p>
<ul>
	<li>Has issues with Flash z-index.</li>
</ul>

<h3>Compression</h3>
<p>Though I haven't tried it yet, it is probably a good idea to compress mocha.js once you are ready to go live. You might try the <a href="http://developer.yahoo.com/yui/compressor/">YUI Compressor</a></p>

<h3>Make a Donation</h3>
<p>Help support the continued development of Mocha UI.</p>

<form action="https://www.paypal.com/cgi-bin/webscr" method="post" target="_blank">
<input type="hidden" name="cmd" value="_s-xclick">
<input type="image" src="https://www.paypal.com/en_US/i/btn/x-click-but04.gif" border="0" name="submit" alt="Make payments with PayPal - it's fast, free and secure!">
<img alt="" border="0" src="https://www.paypal.com/en_US/i/scr/pixel.gif" width="1" height="1">
<input type="hidden" name="encrypted" value="-----BEGIN PKCS7-----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-----END PKCS7-----
">
</form>	